<template>
  <div class="funnel-model">
    <title-bar bar-title="销售执行力" :more=more :more-path=morePath></title-bar>
    <ECharts v-if="init" :options="funnel" eclass="echart" :resize="resize"></ECharts>
    <!-- <div class="funnel-model-body">
      <div class="trapezoid-array">
        <div class="trapezoid-item trapezoid-item1">
          <div class="trapezoid trapezoid-1"></div>
        </div>
        <div class="trapezoid-item trapezoid-item2">
          <div class="trapezoid trapezoid-2"></div>
        </div>
        <div class="trapezoid-item trapezoid-item3">
          <div class="trapezoid trapezoid-3"></div>
        </div>
        <div class="trapezoid-item trapezoid-item4">
          <div class="trapezoid trapezoid-4"></div>
        </div>
        <div class="trapezoid-item trapezoid-item5">
          <div class="trapezoid trapezoid-5"></div>
        </div>
        <div class="trapezoid-item trapezoid-item6">
          <div class="trapezoid trapezoid-6"></div>
        </div>

        <div class="position-abs">
          <div class="trapezoid-item trapezoid-item1">
            <div class="trapezoid-content">新客户</div>
          </div>
          <div class="trapezoid-item trapezoid-item2">
            <div class="trapezoid-content">关怀</div>
          </div>
          <div class="trapezoid-item trapezoid-item3">
            <div class="trapezoid-content">预约</div>
          </div>
          <div class="trapezoid-item trapezoid-item4">
            <div class="trapezoid-content">到访</div>
          </div>
          <div class="trapezoid-item trapezoid-item5">
            <div class="trapezoid-content">首次签约</div>
          </div>
          <div class="trapezoid-item trapezoid-item5">
            <div class="trapezoid-content">续报签约</div>
          </div>
        </div>
      </div>
      <div class="trapezoid-array float-left">
        <div class="trapezoid-item">
          <div class="trapezoid-content">{{ newCustom }} 个</div>
        </div>
        <div class="trapezoid-item">
          <div class="trapezoid-content">{{ customCare }} 个</div>
        </div>
        <div class="trapezoid-item">
          <div class="trapezoid-content">{{ reserve }} 个</div>
        </div>
        <div class="trapezoid-item">
          <div class="trapezoid-content">{{ arrive }} 个</div>
        </div>
        <div class="trapezoid-item">
          <div class="trapezoid-content">{{ initialContract }} 个</div>
        </div>
        <div class="trapezoid-item">
          <div class="trapezoid-content">{{ renewalContract }} 个</div>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
  import TitleBar from './title-bar'
  import ECharts from '../components/ECharts'

  require('echarts/lib/chart/funnel')
  require('echarts/lib/component/legend')
  require('echarts/lib/component/tooltip')

  export default {
    props: {
      newCustom: {
        type: String | Number,
        default: ''
      },
      customCare: {
        type: String | Number,
        default: ''
      },
      reserve: {
        type: String | Number,
        default: ''
      },
      arrive: {
        type: String | Number,
        default: ''
      },
      initialContract: {
        type: String | Number,
        default: ''
      },
      renewalContract: {
        type: String | Number,
        default: ''
      },
      more: {
        type: Boolean,
        default: true
      },
      teamId: {
        type: String,
        default:''
      },
      calendar: {
        type: String,
        default:''
      }
    },
    watch: {
      newCustom () {
        this.refactData()
      },
      customCare () {
        this.refactData()
      },
      reserve () {
        this.refactData()
      },
      arrive () {
        this.refactData()
      },
      initialContract () {
        this.refactData()
      },
      renewalContract () {
        this.refactData()
      },
      teamId(){
        this.morePath = '/funnel-model-more?team_id=' + this.teamId + '&calendar=' + this.calendar
      },
      calendar () {
        this.morePath = '/funnel-model-more?team_id=' + this.teamId + '&calendar=' + this.calendar
      }
    },
    components: {
      TitleBar,
      ECharts
    },
    methods: {
      clearResizeTid () {
        if (this.resizeId) clearTimeout(this.resizeId)
      },
      refactData () {
        this.init = false
        this.funnel.legend.data = [
          {name: '新客户 ' + this.newCustom},
          {name: '关怀 ' + this.customCare},
          {name: '预约 ' + this.reserve },
          {name: '到访 ' + this.arrive},
          {name: '首次签约 ' + this.initialContract},
          {name: '续报签约 ' + this.renewalContract},
        ]
        this.funnel.series[0].data = [
          {value: 100, name: '新客户 ' + this.newCustom},
          {value: 90, name: '关怀 ' + this.customCare},
          {value: 80, name: '预约 ' + this.reserve },
          {value: 70, name: '到访 ' + this.arrive},
          {value: 60, name: '首次签约 ' + this.initialContract},
          {value: 50, name: '续报签约 ' + this.renewalContract},
          {value: 40, name: ''}
        ]

        this.resize = !this.resize
        setTimeout(() => {
          this.init = true
        })
      }
    },
    destoryed () {
      this.clearResizeTid()
    },
    data () {
      return {
        init: false,
        morePath: 'funnel-model-more',
        resize: false,
        funnel: {
          title: {
              text: '漏斗图',
              subtext: '纯属虚构'
          },
          tooltip: {
              trigger: 'item',
              // formatter: "{a} <br/>{b} : {c}%"
              formatter: "{b}"
          },
          toolbox: {
              feature: {
                  dataView: {readOnly: false},
                  restore: {},
                  saveAsImage: {}
              }
          },
          legend: {
              left: '60%',
              bottom: '18%',
              orient: 'vertical',
              height: 200
          },
          calculable: true,
          color: ['#89e3d8', '#aacf78', '#70c9f4', '#6796ea', '#f4934b', '#e75d8c', 'white'],
          series: [
              {
                  name:'漏斗图',
                  type:'funnel',
                  left: '10%',
                  top: 60,
                  //x2: 80,
                  bottom: 60,
                  width: '38%',
                  height: 280,
                  // height: {totalHeight} - y - y2,
                  // min: 500,
                  // max: 100,
                  minSize: '0%',
                  maxSize: '100%',
                  sort: 'descending',
                  gap: 2,
                  label: {
                      normal: {
                          show: true,
                          position: 'inside'
                      },
                      emphasis: {
                          textStyle: {
                              fontSize: 14
                          }
                      }
                  },
                  labelLine: {
                      normal: {
                          length: 10,
                          lineStyle: {
                              width: 1,
                              type: 'solid'
                          }
                      }
                  },
                  itemStyle: {
                      normal: {
                          borderColor: '#fff',
                          borderWidth: 1
                      }
                  },
                  data: [
                      // {value: 60, name: '访问'},
                      // {value: 40, name: '咨询'},
                      // {value: 20, name: '订单'},
                      // {value: 80, name: '点击'},
                      // {value: 100, name: '展现'}
                  ]
              }
          ]
      }
      }
    },
    mounted () {
      //
      // this.refactData()
    }
  }
</script>
<style lang="less">
  .funnel-model {
    .echart {
      height: 300px;
      width: 500px;
    }

    padding-bottom: 50px;
    @border-width-factor: 4px;

    @width: 126px;
    @border-width: 10px - @border-width-factor;
    @border-top-width: 30px;
    @item-width: 150px;
    @incline-ratio: 0.6;
    @init-incline-ratio: 0.9;

    .funnel-model-body {
      padding: 30px 0 10px 3rem;
      overflow: hidden;
      position: relative;
    }

    .trapezoid-array {
      position: relative;
      float: left;
    }

    .position-abs {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
    }

    .trapezoid-item {
      width: @item-width;
      height: @border-top-width;
      overflow: hidden;
      margin-top: 4px;
      text-align: center;
      position: relative;
    }

    .trapezoid-content {
      width: 100%;
      text-align: center;
      width: @item-width;
      color: white;
      font-size: 12px;
      font-weight: bolder;
      height: @border-top-width;
      line-height: @border-top-width;
    }

    .float-left {
      float: left;
    }

    .float-left {
      @font-item-size: 80px;
      .trapezoid-item {
        width: @font-item-size;
      }

      .trapezoid-content {
        width: @font-item-size;
        color: #8F939A;
      }
    }

    .trapezoid {
      display: inline-block;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
      float: none;
      z-index: auto;
      width: @width;
      border: @border-width solid rgba(0,0,0,0);
      border-top: @border-top-width solid #70c9f4;
      border-bottom: 0 solid rgba(0,0,0,1);
      height: 0;
      // position: static;
      content: ;
      cursor: default;
      opacity: 1;
      top: auto;
      right: auto;
      bottom: auto;
      left: auto;
      margin: 0;
      padding: 0;
      overflow: visible;
      outline: none;
      -webkit-border-radius: 0;
      border-radius: 0;
      font: normal normal normal 100%/normal Arial, Helvetica, sans-serif;
      color: rgba(0,0,0,1);
      text-decoration: none;
      text-align: left;
      text-transform: none;
      text-indent: 0;
      -o-text-overflow: clip;
      text-overflow: clip;
      letter-spacing: 0;
      white-space: normal;
      word-spacing: 0;
      word-wrap: ;
      background: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      text-shadow: none;
      -webkit-transition: none;
      -moz-transition: none;
      -o-transition: none;
      transition: none;
      -webkit-transform: scaleX(1) scaleY(1) scaleZ(1);
      transform: scaleX(1) scaleY(1) scaleZ(1);
      -webkit-transform-origin: 50% 50% 0;
      transform-origin: 50% 50% 0;
    }

    @ratio: 0.15;


    .trapezoid-1 {
      width: @width;
      border: @border-width solid rgba(0,0,0,0);
      border-top: @border-top-width solid #89e3d8;
    }

    .trapezoid-2 {
      @factor: 1 - (@ratio * @init-incline-ratio );
      width: @width * @factor + ( @border-width-factor + 2 ) - 2.3;
      border: @border-width * @factor + 0.5 solid rgba(0,0,0,0);
      border-top: @border-top-width solid #aacf78;
    }

    .trapezoid-3 {
      @factor: 1 - (@ratio * ( @init-incline-ratio + @incline-ratio * 1.2  ));
      width: @width * @factor + ( @border-width-factor + 9 ) - 8;
      border: @border-width * @factor + 1 solid rgba(0,0,0,0);
      border-top: @border-top-width solid #70c9f4;
    }

    .trapezoid-4 {
      @factor: 1 - (@ratio * ( @init-incline-ratio + @incline-ratio * 2.3 ));
      width: @width * @factor + ( @border-width-factor + 15 ) - 14;
      border: @border-width * @factor + 1.5 solid rgba(0,0,0,0);
      border-top: @border-top-width solid #6796ea;
    }

    .trapezoid-5 {
      @factor: 1 - (@ratio * ( @init-incline-ratio + @incline-ratio * 3.4 ));
      width: @width * @factor + ( @border-width-factor + 20.8 ) - 20;
      border: @border-width * @factor + 2 solid rgba(0,0,0,0);
      border-top: @border-top-width solid #f4934b;
    }

    .trapezoid-6 {
      @factor: 1 - (@ratio * ( @init-incline-ratio + @incline-ratio * 4.5 ));
      width: @width * @factor + ( @border-width-factor + 21 ) - 20;
      border: @border-width * @factor + 2.6 solid rgba(0,0,0,0);
      border-top: @border-top-width solid #e75d8c;
    }

    @left: 7.9px;
  }
</style>
